<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<ChangePatient></ChangePatient>
		<!-- 发票列表标题 -->
		<view class="invoice_title">
			<view class="title">
				发票列表
			</view>
			<view class="filter" @click="filter">
				<image style="width: 36rpx;margin-right: 10rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%94%B5%E5%AD%90%E7%A5%A8%E6%8D%AE/u3804.svg" mode="widthFix"></image>
				<view class="fillter_text">
					筛选
				</view>
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<uni-popup ref="popup_filter" type="right" background-color="#fff" class="popup_filter">
			<view class="filter_content">
				<view class="title">
					时间筛选
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" />
				</view>
				<view class="title">
					发票类型
				</view>
				<view class="innovice_type">
					<view class="types" :class="{active:item.check}" v-for="(item,index) in invoice_types" :key="index" @click="select_type(index)">
						{{item.title}}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 发票列表 -->
		<view class="invoice_lists">
			<view class="invoice_list">
				<view class="list_title">
					<view class="name">
						门诊发票
					</view>
					<view class="status" style="background-color: rgba(230, 255, 251, 1);color: #13C2C2;">
						已开具
					</view>
				</view>
				<view class="innovice_info">
					<view class="textInfo">
						<view class="text_list">
							<view class="text_title">
								就诊人：
							</view>
							<view class="tetx_content">
								王小柯
							</view>
						</view>
						<view class="text_list">
							<view class="text_title">
								票据号：
							</view>
							<view class="tetx_content">
								0050745821
							</view>
						</view>
						<view class="text_list">
							<view class="text_title">
								业务类型：
							</view>
							<view class="tetx_content">
								门诊挂号
							</view>
						</view>
						<view class="text_list">
							<view class="text_title">
								开票时间：
							</view>
							<view class="tetx_content">
								2020-01-01 10:20:36
							</view>
						</view>
					</view>
					<view class="Invoice_Preview">
						<image style="width: 120rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%94%B5%E5%AD%90%E7%A5%A8%E6%8D%AE/u3820.png" mode="widthFix"></image>
						<view class="preview">
							点击预览
						</view>
					</view>
				</view>
				<!-- 操作 -->
				<view class="operte">
					<button class="sendBtn" @click="send_email">发送邮箱</button>
				</view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose"   mode="input" confirmText="确定发送" title="请确认邮箱发送地址" :value="email"
						placeholder="输入用来接收电子发票邮件" @confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>

			</view>
			<view class="invoice_list">
				<view class="list_title">
					<view class="name">
						门诊发票
					</view>
					<view class="status" style="background-color: rgba(255, 241, 240, 1);color: #F5222D;">
						已冲红
					</view>
				</view>
				<view class="innovice_info">
					<view class="textInfo">
						<view class="text_list">
							<view class="text_title">
								就诊人：
							</view>
							<view class="tetx_content">
								王小柯
							</view>
						</view>
						<view class="text_list">
							<view class="text_title">
								票据号：
							</view>
							<view class="tetx_content">
								0050745821
							</view>
						</view>
						<view class="text_list">
							<view class="text_title">
								业务类型：
							</view>
							<view class="tetx_content">
								门诊挂号
							</view>
						</view>
						<view class="text_list">
							<view class="text_title">
								开票时间：
							</view>
							<view class="tetx_content">
								2020-01-01 10:20:36
							</view>
						</view>
					</view>
					<!-- <view class="Invoice_Preview">
						<image style="width: 120rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%94%B5%E5%AD%90%E7%A5%A8%E6%8D%AE/u3820.png" mode="widthFix"></image>
						<view class="preview">
							点击预览
						</view>
					</view> -->
				</view>
				<!-- 操作 -->
				<!-- <view class="operte">
					<button class="sendBtn">发送邮箱</button>
				</view> -->
			</view>
		</view>
		<view class="prompt">
			默认加载近三个月内的发票
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

	// 切换就诊人
	const popup = ref(null)
	const open = () => {
		popup.value.open()
	}
	
	const close = () => {
		popup.value.close()
	}
	// 发送邮箱操作
	const inputDialog = ref(null)
	const email = ref('')
	const send_email = () => {
		inputDialog.value.open()
	}
	const dialogInputConfirm = (value) => {
		inputDialog.value.close()
		email.value=value
	}
	// 筛选弹出层
	const popup_filter = ref(null)
	const filter = () => {
		popup_filter.value.open()
	}
	//日期范围选择
	const range = ref([new Date(), new Date()])
	watch(range,(val,oldval)=> {
		console.log(val,1111)
	})
	// 发票类型数据
	const invoice_types = reactive([
		{
			title:'门诊挂号',
			check:false
		},
		{
			title:'门诊缴费',
			check:false
		},
		{
			title:'住院预交',
			check:false
		},
		{
			title:'自助开单',
			check:false
		},
		{
			title:'病案复印',
			check:false
		},
		{
			title:'中药代煎',
			check:false
		},
	])
	const select = reactive([])
	const select_type = (i) => {
		const newArr = [...invoice_types]
		newArr[i].check=!newArr[i].check
		// invoice_types = [...newArr]
		if(newArr[i].check){
			select.push(newArr[i])
		}else{
			select.splice(select.indexOf(newArr[i]),1)
		}
		
		console.log(select)
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		// 发票标题
		.invoice_title{
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				font-weight: 700;
				color: #000;
			}
			.filter{
				display: flex;
				align-items: center;
				height: 40rpx;
				font-family: 'Microsoft YaHei UI', sans-serif;
				color: #555555;
				font-size: 28rpx;
			}
		}
		// 筛选弹出层
		.popup_filter{
			.filter_content{
				width: 600rpx;
				height: 100%;
				background-color: #fff;
				padding-top: 32rpx;
				padding-left: 14rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
				
				.title{
					height: 40rpx;
					padding-left: 28rpx;
					box-sizing: border-box;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					color: #333;
					position: relative;
				}
				.title::before{
					content: '';
					width: 8rpx;
					height: 36rpx;
					border-radius: 16rpx;
					background-color: rgba(22, 119, 255, 1);
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				.example-body {
					background-color: #fff;
					padding-left: 28rpx;
					margin-bottom: 20rpx;
				}
				.innovice_type{
					padding-left: 28rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.types{
						width: 144rpx;
						height: 66rpx;
						line-height: 66rpx;
						text-align: center;
						background-color: rgba(242, 242, 242, 1);
						border-radius: 16rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 26rpx;
						color: #000;
						margin-bottom: 20rpx;
					}
					.active{
						background-color: rgba(230, 244, 255, 1);
						color: rgb(22, 119, 255);
					}
				}
			}
		}
		// 发票列表
		.invoice_lists{
			.invoice_list{
				padding: 28rpx 22rpx 24rpx 0;
				border-radius: 16rpx;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 30rpx;
				.list_title{
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: 28rpx;
					box-sizing: border-box;
					position: relative;
					.name{
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						font-weight: 700;
					}
					.status{
						// width: 80rpx;
						// height: 40rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						padding: 4rpx;
						border-radius: 4rpx;
					}
				}
				.list_title::before{
					content: '';
					width: 8rpx;
					height: 36rpx;
					background-color: rgba(22, 119, 255, 1);
					border-radius: 16rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				.innovice_info{
					margin-top: 24rpx;
					padding-left: 28rpx;
					display: flex;
					justify-content: space-between;
					.textInfo{
						
						.text_list{
							height: 40rpx;
							display: flex;
							align-items: center;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #000;
							margin-bottom: 16rpx;
							.text_title{
								width: 140rpx;
								color: #7F7F7F;
								margin-right: 12rpx;
							}
							.tetx_content{
								width: 280rpx;
							}
						}
					}
					.Invoice_Preview{
						display: flex;
						flex-direction: column;
						align-items: center;
						.preview{
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
							color: #aaa;
							margin-top: 10rpx;
							cursor: pointer;
						}
					}
				}
				.operte{
					margin-top: 26rpx;
					display: flex;
					justify-content: flex-end;
					.sendBtn{
						width: 200rpx;
						height: 70rpx;
						margin: 0 !important;
						background-color: #fff;
						background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E7%94%B5%E5%AD%90%E7%A5%A8%E6%8D%AE/u3818.svg');
						background-size: cover;
						font-family: 'ArialMT', 'Arial', sans-serif;
						font-size: 28rpx;
						color: #1677FF;
					}
				}
			}
		}
		.prompt{
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #7F7F7F;
			width: 100%;
			height: 40rpx;
			margin-top: 38rpx;
			text-align: center;
		}
	}       
</style>
